import React, { Component } from "react";
import { actionCreators } from "./store";
import { connect } from 'react-redux';
import {fromJS} from 'immutable';
import ShopHeader from '../../../common/header/textHeader';
import Load from '../../../common/load'
import { CatePage } from "./style";
import List from './compoments/list'
class Cates extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
    }
  }
  componentDidMount() {
    let { cates, _getCates } = this.props;
    if (cates.length > 0) {
      this.setState({
        loading: false,
      });
    } else {
      _getCates()
        .then((result) => {
          console.log(1213, result);
          this.setState({
            loading: false,
          });
        })
        .catch((err) => {
        });
    }
  }
  render() {
    let { cates } = this.props;
    return (
      <CatePage>
        <ShopHeader />
        
        {
          this.state.loading ?
            <Load />
            :
            <div className="cate-body">
              <List cates={cates} />
            </div>
        }
      </CatePage>
    );
  }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
  return {
    cates: state.getIn(["shopCates", "cates"]).toJS(),
  };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    _getCates() {
      return new Promise((resove, reject) => {
        dispatch(actionCreators.getCates());
        resove();
      });
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Cates);
